<!DOCTYPE html>
<html>
<link href="style.css" rel="stylesheet" type="text/css">
<head>
    <meta charset="UTF-8">
    <title>学生选课管理系统</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div class="header">
        <h2 class="site-title">
            <span class="logo">&sect;&prop;</span><span>学生选课管理系统</span>
        </h2>
        <nav>
            <ul>
                <li><a class="active" href="home.html" target="content-frame">首页</a></li>
                <li><a href="college.html" target="content-frame">学院管理</a></li>
                <li><a href="course.html" target="content-frame">课程管理</a></li>
                <li><a href="student" target="content-frame">学生管理</a></li>
                <li><a href="course-student.html" target="content-frame">选课管理</a></li>
                <!--                <li v-for="(menu,index) in menus">-->
                <!--                    <a target=" content-frame"-->
                <!--                       v-bind:class="{'active':active==index}"-->
                <!--                       v-bind:href="menu.href"-->
                <!--                       v-bind:key="menu.href"-->
                <!--                       v-on:click="active=index">{{menu.text}}</a>-->
                <!--                </li>-->
            </ul>
        </nav>
<!--                <img src="QR.png" style="position: absolute; top: 0; right: 0;" />-->
    </div>
    <iframe class="main" name="content-frame" src="home.html" width="100%" height="180%"></iframe>
    <div class="footer">
        <p> &copy;Copyright JEE SWUST.</p>
    </div>
</div>
</body>
<script>
    const app = {
        data() {
            return {
                actived: 0,
                menus: [
                    {text: '首页', href: "home.html"},
                    {text: '学院管理', href: "college.html"},
                    {text: '课程管理', href: "course.html"},
                    {text: '学生管理', href: "student"},
                    {text: '选课管理', href: "course-student.html"}
                ]
            }
        },
        /**
         * Vue应用对象生命周期函数，当对应的html元素装载后执行此程序
         */
        mounted() { //页面加载成功事件
            this.loadCourses();
        },
        /**
         * Vue应用对象的成员函数，各函数成员之间用逗号分开；当HTML事件发生时，对应绑定的方法会被执行。
         */
        methods: {// 读取课程函数
            loadCourses() {
                axios.get("/course/course").then(res => {//res 是返回对象
                    this.courses = res.data;
                }).catch(err => {
                    alert(err);
                });
            }, // 弹出“增加课程对话框”前处理
        }
    }

    // 建立 Vue App 对象，并装载 <div id="app"></div> 元素为视图模板
    Vue.createApp(app).mount('#app')
</script>
</html>
